<template>
  <div id="home">
    <!-- 展示页面 -->
    <!-- section1 整体流程 -->
    <div class="section1 section">
      <div class="intro_outer">
        <div class="intro1">
          <div class="intro_title">整体流程</div>
          <div id="section1_intro_1">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;从已知的<strong>BGMM</strong>和<strong>BGMM</strong>数据集出发，寻找药物对之间显著的相互作用。根据相互作用对，找出药物靶标与药物之间的相似度，从而达到预测效果。
          </div>
          <div class="section1_intro_2">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首先，通过标签提取和爬虫，将MalaCards、DrugBank、UniProt和RCSB
            PDB数据库中的数据进行映射，得到需要研究的PDB文件。
            接下来遍历每个PDB文件，为每个文件定义蛋白质和配体相互作用对，并从PDB文件中提取它们。相互作用对通过One-Hot编码映射到欧洲空间。然后利用PCA降维算法和选项聚类算法对数据集进行优化，消除噪声点。然后利用BGMM算法对数据集进行聚类，提取显著交互对;
            通过聚类评价簇内配体的相似性和药物可能的作用位点，并通过软件进行对接验证。
          </div>
          <div class="section1_intro_3">
            <span style="font-weight: bold">本文的操作总结为以下六个部分:</span>
            <br />
            1) 基于疾病提取原始数据。<br />
            2) 相互作用对的训练。 <br />
            3) 数据集的编码和优化。 <br />
            4) 聚类数据集。<br />
            5) 提取蛋白质配体信息 <br />
            6) 对接蛋白质和配体验证
          </div>
        </div>
      </div>
      <div class="intro_imgs">
        <img
          src="../../public/imgs/section1.png"
          alt=""
          width="100%"
          height="100%"
        />
      </div>
    </div>
    <!-- section2 文件提取 -->
    <div class="section2 section">
      <div class="intro_imgs" style="background-color: white">
        <img src="../../public/imgs/section2.png" width="100%" height="100%" />
      </div>
      <div class="intro_outer">
        <div class="intro2">
          <div class="intro_title">文件提取</div>
          <div class="section2_intro_1">
            主要是使用了4个数据库：<br />
            1）malacards 数据库
            <a href="https://www.malacards.org/" target="_blank"
              >https://www.malacards.org/</a
            >
            <br />
            2）drugbank 数据库
            <a href="https://go.drugbank.com/" target="_blank"
              >https://go.drugbank.com/</a
            >
            <br />
            3）uniprot数据库
            <a href="https://www.uniprot.org/" target="_blank"
              >https://www.uniprot.org/</a
            >
            <br />
            4) RCSB PDB
            <a href="https://www.rcsb.org/" target="_blank"
              >https://www.rcsb.org/</a
            >
          </div>
        </div>
      </div>
    </div>
    <!-- section3 数据集 -->
    <div class="section3">
      <div class="line_title" style="margin-bottom: 0px">数据集</div>
      <div class="intro3">
        <div class="intro3_details">
          <strong style="font-size: 20px; margin: 10px; line-height: 20px"
            >相互作用对简介：</strong
          >
          <br />
          <span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            相互作用对被定义为蛋白质的一个蛋白质片段和一个配体的原子形成的相互作用，蛋白质片段定义为蛋白质的一个氨基酸的三个在三维空间上相邻的三个重原子，比如氨基酸GLY根据他的三维空间观察它有三维空间上相邻的有蛋白质片段1：N,CA,C和蛋白质片段2：C，CA,O，其中氨基酸原子标号为CA,
            C,
            O，N的为主链上的原子，其余的原子编号则为侧链上的原子。将20种氨基酸的所有可能出现的蛋白质片段提取出来，在python中以字典的方式存储，方便蛋白质片段的判定，配体的原子记录为它的sybyl类型，共有C.3
            ，C.2 ，C.1 ，C.ar ，N.4，N.3 ，N.2 ，N.1 ，N.ar ，O.3 ，O.2 ，O.CO2
            ，S.3 ，S.2 ，S.O ，S.O2 ，P.3
            等共53钟sybyl类型。判定是否相互作用的标准是蛋白质片段与配体原子三维空间的距离是否小于5埃，这里蛋白质片段的坐标取在PDB文件中序号靠前原子的坐标为它的坐标，如果满足条件就记录下蛋白质片段和配体原子的sybyl类型
          </span>
        </div>
      </div>
      <div class="section3_imgs">
        <div class="section3_imgs1">
          <img src="../../public/imgs/section3_1.png" width="820px" />
          <div class="img_title">&lt;相互作用对统计图&gt;</div>
        </div>
        <div class="section3_imgs2">
          <img src="../../public/imgs/section3_2.png" width="415px" />
          <div class="img_title">&lt;相互作用对统计表&gt;</div>
        </div>
      </div>
    </div>
    <!-- section4 聚类结果 -->
    <div class="section4">
      <div class="line_title">聚类结果</div>
      <div class="section4_imgs">
        <div class="section4_imgs_item">
          <img
            class="section4_imgs_item_img"
            src="../../public/imgs/section4_1.png"
            alt=""
          />
          <div class="img_title">
            &lt;(a) the silhouette score for 50 clusters&gt;
          </div>
        </div>
        <div class="section4_imgs_item">
          <img
            class="section4_imgs_item_img"
            src="../../public/imgs/section4_2.png"
            alt=""
          />
          <div class="img_title">
            &lt;(b) the silhouette score for 80 clusters.&gt;
          </div>
        </div>
        <div class="section4_imgs_item">
          <img
            class="section4_imgs_item_img"
            src="../../public/imgs/section4_3.png"
            alt=""
          />
          <div class="img_title">
            &lt;(c) the silhouette score for 110 clusters.&gt;
          </div>
        </div>
        <div class="section4_imgs_item">
          <img
            class="section4_imgs_item_img"
            src="../../public/imgs/section4_4.png"
            alt=""
          />
          <div class="img_title">
            &lt;(d) the silhouette score for 140 clusters.&gt;
          </div>
        </div>
        <div class="section4_imgs_item">
          <img
            class="section4_imgs_item_img"
            src="../../public/imgs/section4_5.png"
            alt=""
          />
          <div class="img_title">
            &lt;(e) the silhouette score for 170 clusters.&gt;
          </div>
        </div>
        <div class="section4_imgs_item">
          <img
            class="section4_imgs_item_img"
            src="../../public/imgs/section4_6.png"
            alt=""
          />
          <div class="img_title">
            &lt;(f) The change of clustering silhouette score at
            50,80,110,140,170 distributions.&gt;
          </div>
        </div>
      </div>
    </div>
    <!-- section5 结果展示 -->
    <div class="section5">
      <div class="line_title">结果展示</div>
      <div class="intro5">
        <div class="intro5_details">
          在经过聚类得到最终每条相互作用对的标签之后以20%作为阈值对每一个聚类中的相互作用对进行遍历，如果某一种相互作用对的数量占该聚类相互作用对总数的20%以上则判定这种相互作用对为显著相互作用对，在遍历完成后最终可以得到104个相互作用对，其中有46个蛋白质片段和7种sybyl原子类型，他们之间的相互作用关系如图1-4所示，其中蓝色单元内为蛋白质片段，洋红色框内为配体原子的sybyl类型，绿色连线的两端为可能相互作用的二者。
        </div>
      </div>
      <div class="section5_img">
        <img src="../../public/imgs/section5.png" width="900px" />
        <div class="img_title">&lt;Significant interaction on display&gt;</div>
      </div>
    </div>
    <!-- section6 对接展示图 -->
    <div class="section6">
      <div class="line_title">对接展示图</div>
      <div class="section6_imgs">
        <div class="section6_imgs_item">
          <img
            class="section6_imgs_item_img"
            src="../../public/imgs/section6_1.png"
          />
          <div class="img_title">&lt;1&gt;</div>
        </div>
        <div class="section6_imgs_item">
          <img
            class="section6_imgs_item_img"
            src="../../public/imgs/section6_2.png"
          />
          <div class="img_title">&lt;2&gt;</div>
        </div>
        <div class="section6_imgs_item">
          <img
            class="section6_imgs_item_img"
            src="../../public/imgs/section6_3.png"
          />
          <div class="img_title">&lt;3&gt;</div>
        </div>
        <div class="section6_imgs_item">
          <img
            class="section6_imgs_item_img"
            src="../../public/imgs/section6_4.png"
          />
          <div class="img_title">&lt;4&gt;</div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div class="footer_con">Copyright 2022</div>
      <div class="footer_con">
        《基于结构相似性的无监督药物-靶点相互作用预测》
      </div>
    </div>
  </div>
</template>
<style scoped>
#home {
  background-color: #c8fff9;
}
a {
  color: black;
}
.section {
  /* border:1px solid red;
	*/
  display: flex;
  width: 80%;
  margin: 0rem auto;
}
.section1 {
  /* background-color: #33beff60; */
  margin-top: 3.75rem;
}
.intro_outer {
  width: 50%;
  background-color: #1edfd8;
  /* background-image: url("https://image.16pic.com/00/93/44/16pic_9344635_s.png?imageView2/0/format/png");
  background-repeat: no-repeat;
  background-size: cover; */
}
.intro1 {
  line-height: 1.75rem;
  flex-wrap: wrap;
  margin: 0.625rem 2.5rem;
  /* color: white; */

  /* color:white;
	/ */
}
.intro_title {
  font-size: 2rem;
  font-weight: bold;
  margin: 1.75rem 1.875rem;
  color: #ffffffef;
}
.intro_imgs {
  width: 50%;
  text-align: center;
}
.section1_intro_3 {
  margin-top: 0.625rem;
}
.intro2 {
  line-height: 2.1875rem;
  flex-wrap: wrap;
  margin: 6.125rem 2.5rem;
}
.line_title {
  width: 80%;
  height: 3.125rem;
  margin: 0.625rem auto;
  background-color: #10a7ff;
  line-height: 3.125rem;
  font-size: 1.62rem;
  color: #ffffff;
  text-align: center;
}
.intro3 {
  text-align: center;
  width: 80%;
  height: 9.375rem;
  margin: 0.625rem auto;
  background-color: #1edfd8;
  padding: 1.25rem 0;
}
.intro3_details {
  text-align: start;
  margin: 0.625rem 1.25rem;
}
.section3_imgs {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  margin-top: 0.3125rem;
}
.section3_imgs1 {
  margin-right: 7.125rem;
}
.img_title {
  color: #5c5c5c;
  margin: 0.1875rem auto;
}
.section4_imgs {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  /* border:1px solid red;
	*/
  margin: 0.625rem auto;
}
.section4_imgs_item {
  width: 25rem;
  margin: 0.625rem;
  /* border:1px solid black;
	*/
}
.section4_imgs_item_img {
  width: 25rem;
  height: 16.875rem;
}
.intro5 {
  text-align: center;
  width: 80%;
  height: 5rem;
  margin: 0.625rem auto;
  background-color: #1edfd8;
  padding: 1.25rem 0;
}
.intro5_details {
  text-align: start;
  margin: 0.625rem 1.25rem;
}
.section5_img {
  width: 50rem;
  margin: 0rem auto;
  text-align: center;
}
.section6_imgs {
  width: 80%;
  margin: 0rem auto;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.section6_imgs_item {
  width: 38.5rem;
  margin: 0.625rem;
}
.section6_imgs_item_img {
  width: 38.5rem;
  height: 21.875rem;
}
.footer {
  /* position:absolute;
	*/
  width: 100%;
  margin: 0.0625rem auto;
  text-align: center;
  height: 5rem;
  line-height: 2.5rem;
  background-color: #3f3f3f;
  cursor: default;
}
.footer_con {
  text-align: center;
  color: #f1f8ff;
}
</style>
